<template>
  <div class="admin">
    <div class="doMessage">
      <div class="search">
        <input type="text" placeholder="请输入关键字" v-model="name" />
        <button @click="search">搜索</button>
      </div>
      
    </div>
    <!-- 表格 -->
    <el-table :data="pageData" style="width: 100%">
      <el-table-column label="用户编号" prop="_id"> </el-table-column>
        <el-table-column label="用户名" prop="nickName">
          <!-- <img :src="scope.row.image_src" alt=""> -->
        </el-table-column>
      

      <el-table-column label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.avatarUrl" alt="" width="100px" height="100px">
        </template>
         </el-table-column>
      <el-table-column label="住址" prop="province"> </el-table-column>
      <el-table-column label="vip截至时间" prop="vipdate"> </el-table-column>
      <el-table-column align="center" width="500px">
        <template slot="header" slot-scope="scope">
          
          操作
          
        </template>
        <template slot-scope="scope">
          
          <el-button size="mini" type="primary" @click="update(scope.row)"
          >充值会员</el-button
        >

        <el-dialog title="充值会员" :visible.sync="dialogFormVisible1">
          <el-form :model="form1">
            <el-form-item label="id" :label-width="formLabelWidth">
              <el-input v-model="form1._id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="时间" :label-width="formLabelWidth">
              <el-input v-model="form1.date" autocomplete="off"></el-input>
            </el-form-item>
            
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="add1">确 定</el-button>
          </div>
        </el-dialog>
          <el-button size="mini" type="danger" @click="handleClose(scope.row._id)"
            >取消会员</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        style="margin-top: 12px;text-align: right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      name: "",
      searchData: [],
      pageData:[],
      pageTotal: 0,
      currentPage: 1,
      // 每页大小 默认每页10条数据
      pageSize: 10,
      name1:'',
      
      dialogFormVisible1:false,
      
      form1: {
        _id:'',
        date:''
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    
    handleSizeChange (val) {
      this.pageSize = val

      this.pageData = this.queryByPage()
    },
    // 改变当前页的回调
    handleCurrentChange (val) {
      this.currentPage = val

      this.pageData = this.queryByPage()
    },

    async handleDelete(_id) {
      
     let {data:res}= await this.$http.vip.delMember({_id});
     
      this.getAdminApi();
    },

    async getAdminApi() {
      let { data: res } = await this.$http.vip.getAllMembers();
      console.log(res);
      this.tableData = res.data;
      this.pageTotal=res.data.length
      this.pageData = this.queryByPage()
    },
    search() {
        this.name1=this.name
        let newData = this.tableData.filter((item) =>item.goods_id==this.name);
        this.searchData=newData
    },
    
    async add1() {
      
      let { data: res } = await this.$http.vip.updateMemberToVip(this.form1);
      console.log(res);
      this.dialogFormVisible1 = false;
      this.getAdminApi();
    },
    update(val){
      
      this.form1={
        _id:val._id,
        date:val.vipdate
      }
      this.dialogFormVisible1=true
    },
    queryByPage () {
      // 起始位置 = (当前页 - 1) x 每页的大小
      const start = (this.currentPage - 1) * this.pageSize
      // 结束位置 = 当前页 x 每页的大小
      const end = this.currentPage * this.pageSize

      return this.tableData.slice(start, end)
    },
    async handleClose(_id){
     let {data:res}=await this.$http.vip.cancleMember({_id})
     console.log(res);
    }

  },
  created() {
    this.getAdminApi();
  },
  computed: {
    newData() {
      if (this.searchData.length == 0 && this.name1=='') {
        return this.tableData;
      } else if(this.searchData==0 && this.name1){
        return this.searchData;
      } else{
        return this.searchData;
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.admin {
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
}
.doMessage {
  display: flex;

  .search {
    width: 300px;
    height: 40px;
    display: flex;
    margin-right: 50px;
    input {
      flex-grow: 1;
    }
    button {
      width: 50px;
      border: none;
      outline: none;
      background-color: blue;
      color: white;
    }
  }
  .add {
    width: 80px;
    height: 40px;
    & > button {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background-color: blue;
      color: white;
    }
  }
}
.cell{
  width: 300px;
}
</style>